<template>
    <div class="topNav">
        <div class="nav_con">
              <router-link to="/">首页</router-link>
              <div class="shu"> |  </div>
              <router-link to="/intro?id=1">联盟简介</router-link>
              <div  class="shu"> |  </div>
              <router-link to="/intro?id=3">近期活动</router-link>
              <div  class="shu"> |  </div>
              <router-link to="/list?ind=1&id=1">视频推荐</router-link>
              <!-- <div  class="shu"> |  </div>
            <template v-if="!isLoginSuccess">
              <router-link to="login">登录</router-link>
            </template>
            <template v-else>
                  <div class="userdiv">
                     <router-link to="/user"><span>个人中心</span></router-link>
                          <i @click="showCenter=true" v-if="!showCenter" style="color: #616ed6;cursor: pointer;" class="el-icon-arrow-down"></i>
                          <i @click="showCenter=false" v-if="showCenter" style="color: #616ed6;cursor: pointer;" class="el-icon-arrow-up"></i>
                     <transition name="el-zoom-in-top">
                          <div class="usercenter" v-show="showCenter">
                            <div class="usercenter_div"  @click="logout">退出登录</div>
                            <div class="usercenter_div"  @click="setPass=true">修改密码</div>
                          </div>
                     </transition>
                  </div>
            </template> -->
        </div>
        <el-dialog  title="修改密码" :visible.sync="setPass" :close-on-click-modal="no" :show-close="no">
          <el-form style="width:500px" :model="form">
            <el-form-item label="旧密码:" :label-width="formLabelWidth">
              <el-input v-model="form.old_password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="新密码:" :label-width="formLabelWidth">
              <el-input v-model="form.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码:" :label-width="formLabelWidth">
              <el-input v-model="form.re_password" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
        
          <div slot="footer" class="dialog-footer">
            <el-button @click="setPass = false">取 消</el-button>
            <el-button type="primary" @click="setPassword">确 定</el-button>
          </div>
        </el-dialog>
   </div>

</template>
<script>
import axios from 'axios';

export default {
    name:'headNav',
    computed:{
        isLoginSuccess(){
              return this.$store.state.isLoginSuccess
        },
    },
    data(){
        return {
            no:false,
            showCenter:false,
            setPass:false,
            form:{
              old_password:'',
              password:'',
              re_password:''
            },
            formLabelWidth: '160px',
        }
    },
   methods:{
      logout(){
      this.$router.push({path:this.$route.fullPath})
      var token = localStorage.getItem('isLoginSuccess');
      this.$axios.get('https://eduvideo.hangzhou.com.cn/api/v1/logout',
            { headers: {
                    Authorization: "Bearer "+token, 
                    }
        } ).then(res=>{
                if(res.data.status =='success'){
                        this.$message({
                        type: 'success',
                            message: res.data.message
                        })
                    }
                    setTimeout(() => {
                    localStorage.removeItem('isLoginSuccess');
                    this.$store.commit('changeState')
                    this.$router.push({ path: '/' })
                    }, 1500);
            })
      },
      reset(){
        this.form.old_password = '';
        this.form.password = '';
        this.form.re_password = '';
      },
      setPassword(){
        var form = {
          old_password: this.form.old_password,
          password: this.form.password,
          re_password: this.form.re_password,
        }
        var token = localStorage.getItem('isLoginSuccess');
        axios.defaults.headers.common['Authorization'] = "Bearer " + token
        this.$axios.post('https://eduvideo.hangzhou.com.cn/api/v1/set_password',form).then(res=>{       
                                 if(res.data.status == 'success'){
                                     this.$message({
                                     message: '修改成功',
                                     type:'success',
                                     offset:window.screen.height/2,
                                     duration:1000
                                     })
                                    
                                     setTimeout(() => {
                                        this.setPass = false;
                                        this.reset()
                                   }, 2000);
                                 }else{
                                     this.$message({
                                     message: res.data.message,
                                     type:'error',
                                     offset:window.screen.height/2,
                                     })
                                 }
                             
                             })
      }
    },
}
</script>
<style scoped>
.topNav{
    width: 100%;
    height: 65px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .nav_con{
    width: 1400px;
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    font-size: 18px;
    font-weight: bolder;
  }
  .nav_con a{
    text-decoration: none;
    font-size: 18px;
    color: #616ed6;
    cursor: pointer;
    letter-spacing: 5px;
  }
  .shu{
    color: #616ed6;
    margin: 0 35px;
  }
  .userdiv{
    position: relative;
    display: inline-block;
  }
  .usercenter{
    position: absolute;
    top: 30px;
    left: 10px;
    border: 1px solid #E4E7ED;
    border-radius: 4px;
    background-color: #FFF;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    box-sizing: border-box;
    margin: 5px 0;
    transform-origin: center top;
  }
  .usercenter_div{
    font-size: 16px !important;
    color: #616ed6 !important;
    margin: 15px;
    cursor: pointer;
    letter-spacing: 1px;
  }
  .usercenter_div:hover{
    background-color: #F5F7FA;
  }
</style>
